<template>
  <div class="content">
    <Child>
        <!-- 匿名插槽写法一
        <template v-slot>
            <div>匿名插槽，插入到了头部</div>
        </template> -->

        <!-- 以下是简写 -->
        <!-- <template #default>
            <div>匿名插槽，插入到了头部</div>
        </template> -->

        <!-- 具名插槽 -->
        <!-- <template v-slot:main>
            <div>具名插槽，插入名为main的插槽中</div>
        </template> -->

        <!-- 以下是简写 -->
        <template #main>
            <div>具名插槽，插入名为main的插槽中</div>
        </template>


        <!-- 接受子组件插槽中的数据 -->
        <template #default="{data}" >
            <div>来自子组件插槽： {{ data }}</div>
        </template>

        <template #[slotName]>
            <div>变量名动态修改</div>
        </template>
    </Child>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import Child from './child.vue' 

let slotName = ref('footer')
</script>
<style scoped>

</style>